<template>
	<view class="modification">
		<view v-if="name=='业务范围'">
			<view class="business">业务选择范围</view>
			<view class="busitem">
				<text v-for="(item,index) in business" :key="item.value" class="tab" :class="item.ischeck==true?'active':''"
				@click="businessclick(index,item)">{{item.label}}</text>
			</view>
			<view class="keep" @click="keep">保存</view>
		</view>
		<view v-else>
			<view class="service" v-for="(item,index) in service_list" :key="index" style="padding: 20rpx 20rpx 0 20rpx;">
				<text>地址：</text>
				<!-- <input type="number" placeholder="请填写" v-model="service_list[index]" @click="" /> -->
				<u-input v-model="service_list[index]" input-align="right" placeholder="请选择" type="select"
					@click="showservice(index)" />
				<!-- <u-select v-model="service_show" :list="service" @confirm="confirm_service($event,item)" mode="mutil-column-auto"></u-select> -->
				<u-icon name="minus-circle-fill" color="#B8212B" size="28" @click="deleterow(index)"></u-icon>
			</view>
			<u-select v-model="service_show" :list="service" @confirm="confirm_service" mode="mutil-column-auto"></u-select>
			<!-- <u-picker mode="multiSelector" v-model="service_show" :range="service" range-key="label" :default-selector='[0, 0, 0]' @confirm="confirm_service"></u-picker> -->
			<view class="add" @click="add">
				<u-icon name="plus" color="#B8212B" size="28"></u-icon>添加地址
			</view>
			<button class="submit" @click="submit">保存</button>
		</view>
	</view>
</template>

<script>
	import api from '@/static/js/api.js'
	
	export default{
		data(){
			return{
				name:'',
				business:[],
				service:[],
				activeindex:0,
				selarr:[],
				business_ids:[],
				service_ids:[],
				service_list:[],
				form:{
					
				},
				service_show:false,
				personInfo:{},
				serviceindex:'',
				newarr:[],
				valueArr: [0, 0, 0], // 用于判断当前滑动的是哪一列
			}
		},
		onShow(){
			this.personInfo = JSON.parse(uni.getStorageSync('userInfo'));
		},
		onLoad(option){
			console.log(option);
			this.name = option.p4
			if(this.name == '业务范围'){
				this.business_ids = JSON.parse(option.p2)
				console.log(this.business_ids);
				this.business = JSON.parse(option.p1)
				this.business.forEach(item=>{
					item.ischeck = false;
					// if(item.label=='')
					this.business_ids.forEach(i=>{
						if(item.value==i){
							item.ischeck = true;
						}
					})
				})
				console.log(this.business);
			}else{
				this.service_ids = JSON.parse(option.p2)
				this.service = JSON.parse(option.p1)
				// this.newarr = 
				JSON.parse(option.p1).forEach(item=>{
					item.children
				})
				this.service_list = option.p3.split('、')
			}
		},
		methods:{
			toggleTab() {
				this.$refs.popup.open();
			},
			cancel() {
				this.$refs.popup.close();
			},
			confirm_service(e){
				console.log(e[1].label);
				if(this.service_list.indexOf(e[1].label)!=-1){
					uni.showToast({
						icon: 'none',
						title: '请勿填写重复的地址'
					})
				}else{
					this.service_list[this.serviceindex] = e[1].label
					this.service_ids[this.serviceindex] = e[1].value
				}
			},
			businessclick(index,item){
				let business=[...this.business];
				let selarr=[...this.selarr];
				if(business[index].ischeck==false){
				 business[index].ischeck=true;
				 selarr.push(item)
				}else{
				 business[index].ischeck=false;
				 var index11=selarr.indexOf(index)
				 selarr.splice(index11,1)
				}
				this.business=business;
				// this.selarr=selarr;
				console.log(this.business);
				this.selarr = []
				this.business.forEach(item=>{
					if(item.ischeck==true){
						this.selarr.push(item.value);
					}
				})
			},
			deleterow(index){
				this.service_list.splice(index,1)
				this.service_ids.splice(index,1)
			},
			add(){
				this.service_list.push('')
				this.service_ids.push('')
			},
			keep(){
				console.log(this.selarr);
				api.modifyInformation(this.personInfo.access_token,'res.partner','_api_editor_personal_information',this.personInfo.uid,'班组长',{
					business_ids:JSON.stringify(this.selarr)
				}).then(res=>{
					if(res.errcode==0){
						uni.navigateBack()
					}
				})
			},
			submit(){
				this.service_ids.forEach((item,index)=>{
					if(item==''){
						this.service_ids.splice(index,1)
					}
				})
				console.log(this.service_list);
				console.log(this.service_ids);
				api.modifyInformation(this.personInfo.access_token,'res.partner','_api_editor_personal_information',this.personInfo.uid,'班组长',{
					city_ids:JSON.stringify(this.service_ids)
				}).then(res=>{
					if(res.errcode==0){
						uni.navigateBack()
					}
				})
			},
			showservice(index){
				this.serviceindex = index
				this.service_show = true
			}
		}
	}
</script>

<style lang="less" scoped>
	.modification{
		padding: 20rpx 0;
		>view{
			.business{
				padding: 0 20rpx;
			}
			.busitem{
				display: flex;flex-wrap: wrap;
				>text{
					margin-top: 20rpx;
					border-radius: 10rpx;
				}
			}
			.tab{
				background: #eee;
				color: #000;
				padding: 10rpx 16rpx;
				margin-left: 20rpx;
			}
			.active{
				background: #1984FF;
				color: #fff;
			}
			.service{
				display: flex;
				align-items: center;
				/deep/u-input{
					width: 75%;
					margin-right: 5%;
				}
				/deep/input {
					flex: 1;
					height: 44rpx;
					background: #EFF0F1;
					border-radius: 8rpx;
					padding: 14rpx 20rpx;
				}
			}
		}
	}
	.submit {
		background: #D73C4B;
		color: #fff;
		width: 40%;
		margin-top: 20rpx;
		height: 60rpx;
		font-size: 28rpx;
		line-height: 60rpx;
	}
	.keep{
		background: #D73C4B;
		color: #fff;
		width: 40%;
		margin: 20rpx auto 0;
		height: 60rpx;
		font-size: 28rpx;
		line-height: 60rpx;
		border-radius: 10rpx;
		text-align: center;
	}
	.add{
		color: #000;
		width: 30%;
		margin: 20rpx auto 0;
		height: 60rpx;
		font-size: 28rpx;
		line-height: 60rpx;
		text-align: center;
	}
	/deep/.uni-picker-view-wrapper:nth-child(2) .uni-picker-view-column{
		display: none!important;
	}
	/deep/.u-input .u-icon__icon::before{
		// content: "\e605"!important;
		display: none!important;
	}
	/deep/.u-input__input{
		text-align: left;
	}
	/deep/.u-select__body__picker-view{
		font-size: 50rpx;
	}
	/deep/picker-view-column:nth-child(3){
		display: none!important;
	}
</style>
